<template>
  <div class="upload content-box">
    <el-tabs v-model="activeName" class="container">
      <el-tab-pane label="PDF合并" name="pdfhebing">
        <div class="contain">
          <el-upload
              class="upload"
              ref="pdfhebing"
              drag
              :action="hbreq"
              multiple
              accept=".pdf"
              :auto-upload="false"
              :limit="acitveFileLimit"
              :on-exceed="showLimitInfo"
              :on-change="updateFileList"
              :on-success="handleSuccess"
              :on-error="handleError"
          >
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">只能上传PDF文件，顺序上传进行合并，上传完成后自动下载合并结果</div>
            </template>
          </el-upload>
          <div class="btns">
            <el-button type="primary" plain @click="submit">上传文件</el-button>
            <el-button plain @click="clear">清空文件</el-button>
            <!--            <el-button plain @click="log">log</el-button>-->
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="PDF识别" name="pdfshibie">
        <div class="contain">
          <el-upload
              class="upload"
              ref="pdfshibie"
              drag
              :action="sbreq"
              multiple
              accept=".pdf"
              :auto-upload="false"
              :limit="acitveFileLimit"
              :on-exceed="showLimitInfo"
              :on-change="updateFileList"
              :on-success="handleSuccess"
              :on-error="handleError"
          >
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">只能上传PDF文件，一次只能上传一个文件，识别结果将弹窗显示</div>
            </template>
          </el-upload>
          <div class="btns">
            <!-- <el-button type="success" plain>下载结果</el-button> -->
            <el-button type="primary" plain @click="submit">上传文件</el-button>
            <el-button plain @click="clear">清空文件</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="PDF脱敏" name="pdftuomin">
        <div class="contain">
          <el-upload
              class="upload"
              ref="pdftuomin"
              drag
              :action="tmreq"
              multiple
              accept=".pdf"
              :auto-upload="false"
              :limit="acitveFileLimit"
              :on-exceed="showLimitInfo"
              :on-change="updateFileList"
              :on-success="handleSuccess"
              :on-error="handleError"
          >
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">只能上传PDF文件，脱敏结果将以压缩包形式自动下载</div>
            </template>
          </el-upload>
          <div class="btns">
            <!-- <el-button type="success" plain>下载结果</el-button> -->
            <el-button type="primary" plain @click="submit">上传文件</el-button>
            <el-button plain @click="clear">清空文件</el-button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
/* eslint-disable */
import {reqURL} from "@/api/pdfAccess"
export default {
  data() {
    return {
      activeName: "pdfhebing",
      fileList: {
        pdfhebing: [],
        pdfshibie: [],
        pdftuomin: []
      },
      fileLimit: {
        pdfhebing: 10,
        pdfshibie: 1,
        pdftuomin: 10
      },
    };
  },
  computed: {
    hbreq() {
      return reqURL().hb
    },
    sbreq() {
      return reqURL().sb
    },
    tmreq() {
      return reqURL().tm
    },
    activeRef() {
      return this.$refs[this.activeName];
    },
    activeFileList() {
      return this.fileList[this.activeName];
    },
    acitveFileLimit() {
      return Number(this.fileLimit[this.activeName]);
    },
    isReady() {
      return this.activeFileList.every(item => {
        return item.status === "ready";
      });
    }
  },
  methods: {
    showLimitInfo() {
      ElMessage.error("一次上传最多支持" + this.acitveFileLimit + "个文件");
    },
    submit() {
      // console.log(this.activeFileList)
      if (this.activeFileList.length <= 0) {
        ElMessage.error("上传文件为空！");
      } else if (!this.isReady) {
        ElMessage.error("存在文件上传未完成，请等待后提交或重新上传");
      } else {
        this.activeRef.submit();
      }
    },
    clear() {
      this.activeRef.clearFiles();
    },
    handleSuccess(response) {
      console.log(response);
    },
    handleError(err) {
      console.log(err);
      ElMessage.error("上传失败！请检查网络或稍后重试");
    },
    updateFileList(file, fileList) {
      this.fileList[this.activeName] = fileList;
    },
    log(a) {
      console.log(this.activeFileList);
      // console.log(this.acitveFileLimit);
    }
  }
};
</script>
<style scoped lang="scss">
.container {
  .contain {
    min-height: calc(80vh - 58px);
    border: 1px solid #d6d6d6;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;

    .upload {
      width: 95%;
      margin: 12px auto auto;
      height: 90px;

      .el-upload {
        .el-upload__tip {
          text-align: center;
        }

        .el-upload-list {
          min-height: 100px;
          max-height: 220px;
          overflow-y: auto;
        }
      }
    }

    .btns {
      width: 95%;
      margin: auto auto 12px;

      .el-button {
        float: right;
        margin-left: 12px;
      }
    }
  }
}
</style>
